<template>
  <div class="scroll-imgs">
    <img :src="imglist[currentIndex].imgUrl" alt="图片无法加载" />
    <div class="arrow_left" @click="preBtn(currentIndex)">
      <i class="el-icon-arrow-left"></i>
    </div>
    <div class="arrow_right" @click="nextBtn(currentIndex)">
      <i class="el-icon-arrow-right"></i>
    </div>
    <div class="points">
      <ul>
        <li
          v-for="(item, index) in imglist"
          :key="item.id"
          @click="pointBtn(index)"
        ></li>
      </ul>
    </div>
  </div>
</template>
    <script>
export default {
  name: "Scroll",
  data() {
    return {
      // 静态轮播图数据
      imglist: [
        {
          id: "001",
          imgUrl: require("@/assets/home_images/scroll_imgs/1.jpg"),
          name: "第一张图",
        },
        {
          id: "002",
          imgUrl: require("@/assets/home_images/scroll_imgs/2.jpg"),
          name: "第2张图",
        },
        {
          id: "003",
          imgUrl: require("@/assets/home_images/scroll_imgs/3.jpg"),
          name: "图3",
        },
      ],
      // 初始显示图片索引
      currentIndex: 0,
      // 定时器
      timer: null,
    };
  },
  created() {
    // getImgData(){
    // axios({
    //   url:'http://123.207.32.32:8000/home/multidata'
    // }).then(result => {
    //   console.log('接口返回的数据',result)
    //   this.imglist =result.data.data.banner.list;
    //   console.log('获取数据banner',this.imglist)
    // })
    // }
  },
  methods: {
    // 左按钮
    preBtn(index) {
      // console.log("当前索引的值：", index);
      if (this.imglist.length && index <= 0) {
        this.currentIndex = this.imglist.length;
      }
      this.currentIndex--;
    },
    // 右按钮
    nextBtn(index) {
      // console.log("backBtn：", index);
      if (this.imglist.length && index >= this.imglist.length - 1) {
        this.currentIndex = 0;
      }
      this.currentIndex++;
    },
    // 圆点点击跳转
    pointBtn(index) {
      // console.log('点击的是第几个圆点',index)
      this.currentIndex = index;
    },
  },
};
</script>
    <style scoped>
.scroll-imgs {
  width: 320px;
  height: 320px;
  background: green;
  text-align: center;
  margin: 0 auto;
  position: relative;
}
img {
  margin-top: 10px;
  width: 300px;
  height: 300px;
}
.arrow_left,
.arrow_right {
  height: 20px;
  width: 20px;
  position: absolute;
}
.arrow_left {
  left: 10px;
  top: 150px;
}
.arrow_right {
  right: 10px;
  top: 150px;
}
.arrow_left:hover,
.arrow_right:hover {
  background: chocolate;
}
ul {
  position: absolute;
  top: 280px;
  left: 0;
  right: 0;
}
ul li {
  width: 10px;
  height: 10px;
  margin: 5px 5px;
  background-color: grey;
  display: inline-block;
}
</style>